<template>
  <div>
    <el-card>
      <template #header>
        <el-space>
          <el-icon size="large">
            <component is="Publish"></component>
          </el-icon>
          <el-text> 发布活动 </el-text><el-tag round>{{ userInfo.publishEventCount }}</el-tag>
        </el-space>
      </template>
      <div>
        <el-space wrap>
          <event-card @edit="goEdit" :can-edit="isOwner" v-for="(item, index) in publishEventPage.list" :key="index"
                      :eventInfo="item"></event-card>
        </el-space>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <template #header>
        <el-space>
          <el-icon size="large">
            <component is="Join"></component>
          </el-icon>
          <el-text> 参与活动 </el-text><el-tag round>{{ userInfo.joinEventCount }}</el-tag>
        </el-space>
      </template>
      <div>
        <el-space wrap>
          <event-card @info="goDetail" v-for="(item, index) in joinEventPage.list" :key="index" :eventInfo="item"></event-card>
        </el-space>
      </div>
    </el-card>
    <div>
      待审核
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, computed} from "vue";
import {reqEventPersonInfo, reqGetEventPage} from "@/api/social/event";
import {useUserStore} from "@/stores/user";
import {useRoute, useRouter} from "vue-router";
import EventCard from "@/components/card/EventCard.vue";

let userInfo = ref({})
let route = useRoute()
let router = useRouter()
let userStore = useUserStore()
let publishEventQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  organizationId: route.params.userId
})
let publishEventPage = reactive({
  total: 0,
  list: [],
})
let joinEventQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  joinerId: route.params.userId
})
let joinEventPage = reactive({
  total: 0,
  list: [],
})
let isOwner = computed(() => {
  return Number(route.params.userId) === Number(userStore.userId)
})

let getUserPublishEventPage = async () => {
  let res = await reqGetEventPage(publishEventQuery)
  Object.assign(publishEventPage, res.data)
}
let goEdit = (eventId: string) => {
  router.push({
    name: 'event-create',
    query: {
      eventId
    }
  })
}
let goDetail=(eventId: string )=>{
  router.push({
    name: 'event-detail',
    query: {
      eventId
    }
  })
}
let getUserJoinEventPage = async () => {
  let res = await reqGetEventPage(joinEventQuery)
  Object.assign(joinEventPage, res.data)
}
let getUserInfo = async () => {
  let res = await reqEventPersonInfo(route.params.userId as string)
  userInfo.value = res.data
}
onMounted(() => {
  getUserInfo()
  getUserPublishEventPage()
  getUserJoinEventPage()
})
</script>

<style scoped>

</style>
